<template>
  <div class="app-container">
    <!-- 欢迎页 专家/企业两版 -->
    <!-- 专家 -->
    <el-card >
      <div v-if="userRoles.includes(101)">
        <div class="welcome-content">
          <p class="welcome-content-call">尊敬的评审专家：</p>
          <div class="welcome-content-text">
            为确保确保农产品质量安全检测机构考核申请与评估流程的严肃、公正和透明，请严格遵守相关法律法规，遵循《中华人民共和国农产品质量安全法》、《农产品质量安全检测机构考核办法》等法律条文，保证评估活动合法合规。
            请恪守廉洁自律原则，拒绝任何可能影响评估公正性的行为。坚持评估的公开透明，避免外部干扰，确保农产品质量安全检测的权威性和公信力。 感谢您对农产品质量安全检测工作的支持与贡献！
          </div>
          <p class="welcome-content-signature">山东省农业农村厅</p>
        </div>
      </div>
      <!-- 企业 -->
      <div v-else-if="userRoles.includes(102)">
        <div class="welcome-content">
          <p class="welcome-content-call">尊敬的检测机构：</p>
          <div class="welcome-content-text">
            <p>为确保确保农产品质量安全检测机构考核申请及评审工作的严肃性、公正性和透明性。</p>
            <p>
              申请CATL合格证必须依法依规，提交的材料必须真实、完整、准确。请遵守廉洁自律规定，拒绝任何可能影响评审公正性的行为。鼓励监督评审工作，确保其公开透明。遇到不公或违规行为，请立即举报。举报电话：0531-51789260,举报信息将得到保密，并依法处理。
            </p>
            <p>感谢您对农产品质量安全检测工作的支持与贡献！</p>
          </div>
          <p class="welcome-content-signature">山东省农业农村厅</p>
        </div>
      </div>
      <div v-else>
        <div class="default-content">欢迎来到 {{ title }} 系统</div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const title = import.meta.env.VITE_APP_TITLE;
// 用户角色
const userRoles = computed(() => {
  const roles = JSON.parse(JSON.stringify(userStore.userRoles));
  if (roles.length) {
    const name = roles.map((item) => {
      return item.roleName;
    });
    return roles.map((item) => {
      return item.roleId;
    });
  } else {
    return [];
  }
});
</script>

<style scoped lang="scss">
// 专家模版
.welcome-content {
  padding: 30px 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .welcome-content-call {
    margin-right: auto;
  }
  .welcome-content-text {
    text-indent: 2em;
    line-height: 2;
  }
  .welcome-content-signature {
    margin-left: auto;
  }
}

// 默认
.default-content {
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
